<template>
  <div class="login-log-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <el-card class="search-card">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
          <el-form-item label="登录地址" prop="ipaddr">
            <el-input
              v-model="queryParams.ipaddr"
              placeholder="请输入登录地址"
              clearable
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="用户名称" prop="username">
            <el-input
              v-model="queryParams.username"
              placeholder="请输入用户名称"
              clearable
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="登录状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="登录状态" clearable>
              <el-option label="成功" value="1" />
              <el-option label="失败" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="登录时间">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    
    <!-- 操作按钮区域 -->
    <div class="action-container">
      <el-button 
        type="danger" 
        icon="el-icon-delete" 
        :disabled="multiple" 
        @click="handleDelete"
      >删除</el-button>
      <el-button icon="el-icon-delete" @click="handleClean">清空</el-button>
      <el-button icon="el-icon-download" @click="handleExport">导出</el-button>
      <el-button icon="el-icon-refresh" @click="handleUnlock" v-if="hasUnlockPermission">解锁</el-button>
    </div>
    
    <!-- 表格区域 -->
    <el-card class="table-card">
      <el-table
        v-loading="loading"
        :data="loginLogList"
        @selection-change="handleSelectionChange"
        border
      >
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column label="访问编号" align="center" prop="id" width="100" />
        <el-table-column label="用户名称" align="center" prop="username" :show-overflow-tooltip="true" />
        <el-table-column label="登录地址" align="center" prop="ipaddr" width="130" />
        <el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
        <el-table-column label="浏览器" align="center" prop="browser" :show-overflow-tooltip="true" />
        <el-table-column label="操作系统" align="center" prop="os" :show-overflow-tooltip="true" />
        <el-table-column label="登录状态" align="center" prop="status" width="100">
          <template #default="scope">
            <el-tag v-if="scope.row.status === 1" type="success">成功</el-tag>
            <el-tag v-else type="danger">失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="登录时间" align="center" prop="loginTime" width="160" />
        <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button type="text" icon="el-icon-view" @click="handleDetail(scope.row)">详细</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
    
    <!-- 登录日志详情对话框 -->
    <el-dialog title="登录日志详情" v-model="open" width="700px" append-to-body>
      <el-form :model="form" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户名称：">{{ form.username }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登录状态：">
              <span v-if="form.status === 1" class="text-success">成功</span>
              <span v-else class="text-danger">失败</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登录地址：">{{ form.ipaddr }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登录地点：">{{ form.loginLocation }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="浏览器：">{{ form.browser }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="操作系统：">{{ form.os }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登录时间：">{{ form.loginTime }}</el-form-item>
          </el-col>
          <el-col :span="24" v-if="form.status === 0">
            <el-form-item label="失败原因：">
              <pre>{{ form.msg }}</pre>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="open = false">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 加载状态
const loading = ref(false)
// 选中数组
const ids = ref([])
// 非多个禁用
const multiple = ref(true)
// 总条数
const total = ref(0)
// 登录日志表格数据
const loginLogList = ref([])
// 是否显示弹出层
const open = ref(false)
// 日期范围
const dateRange = ref([])
// 是否有解锁权限
const hasUnlockPermission = ref(true)

// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  ipaddr: undefined,
  username: undefined,
  status: undefined
})

// 表单参数
const form = reactive({
  id: undefined,
  username: undefined,
  ipaddr: undefined,
  loginLocation: undefined,
  browser: undefined,
  os: undefined,
  status: undefined,
  msg: undefined,
  loginTime: undefined
})

// 模拟数据
const mockLoginLogList = [
  {
    id: 1,
    username: 'admin',
    ipaddr: '192.168.1.1',
    loginLocation: '内网IP',
    browser: 'Chrome 91.0.4472.124',
    os: 'Windows 10',
    status: 1,
    msg: null,
    loginTime: '2023-05-20 14:30:00'
  },
  {
    id: 2,
    username: 'admin',
    ipaddr: '192.168.1.1',
    loginLocation: '内网IP',
    browser: 'Chrome 91.0.4472.124',
    os: 'Windows 10',
    status: 1,
    msg: null,
    loginTime: '2023-05-19 09:15:00'
  },
  {
    id: 3,
    username: 'test',
    ipaddr: '192.168.1.2',
    loginLocation: '内网IP',
    browser: 'Firefox 89.0',
    os: 'Windows 10',
    status: 1,
    msg: null,
    loginTime: '2023-05-18 16:45:00'
  },
  {
    id: 4,
    username: 'unknown',
    ipaddr: '192.168.1.3',
    loginLocation: '内网IP',
    browser: 'Chrome 91.0.4472.124',
    os: 'Windows 10',
    status: 0,
    msg: '用户名或密码错误',
    loginTime: '2023-05-18 15:30:00'
  },
  {
    id: 5,
    username: 'admin',
    ipaddr: '192.168.1.4',
    loginLocation: '内网IP',
    browser: 'Safari 14.1',
    os: 'macOS',
    status: 0,
    msg: '验证码错误',
    loginTime: '2023-05-17 11:20:00'
  }
]

// 查询登录日志列表
const getList = () => {
  loading.value = true
  // 模拟接口请求
  setTimeout(() => {
    loginLogList.value = mockLoginLogList
    total.value = mockLoginLogList.length
    loading.value = false
  }, 500)
}

// 搜索按钮操作
const handleQuery = () => {
  queryParams.pageNum = 1
  getList()
}

// 重置按钮操作
const resetQuery = () => {
  dateRange.value = []
  queryParams.ipaddr = undefined
  queryParams.username = undefined
  queryParams.status = undefined
  handleQuery()
}

// 多选框选中数据
const handleSelectionChange = (selection) => {
  ids.value = selection.map(item => item.id)
  multiple.value = !selection.length
}

// 详细按钮操作
const handleDetail = (row) => {
  open.value = true
  Object.assign(form, row)
}

// 删除按钮操作
const handleDelete = () => {
  ElMessageBox.confirm('确认删除已选中的登录日志?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 模拟删除
    ElMessage.success('删除成功')
    getList()
  }).catch(() => {})
}

// 清空按钮操作
const handleClean = () => {
  ElMessageBox.confirm('确认清空所有登录日志?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 模拟清空
    ElMessage.success('清空成功')
    getList()
  }).catch(() => {})
}

// 导出按钮操作
const handleExport = () => {
  ElMessage.info('导出功能开发中...')
}

// 解锁按钮操作
const handleUnlock = () => {
  ElMessageBox.confirm('确认解锁所有已锁定的账户?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 模拟解锁
    ElMessage.success('解锁成功')
  }).catch(() => {})
}

onMounted(() => {
  getList()
})
</script>

<style scoped>
.login-log-container {
  padding: 0;
}

.search-container {
  margin-bottom: 20px;
}

.search-card {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.action-container {
  margin-bottom: 20px;
}

.table-card {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

pre {
  margin: 0;
  padding: 8px 12px;
  background-color: #f5f7fa;
  border-radius: 4px;
  overflow-x: auto;
  font-family: Consolas, Monaco, 'Andale Mono', monospace;
  font-size: 12px;
  line-height: 1.5;
  color: #333;
}

.text-success {
  color: #67C23A;
}

.text-danger {
  color: #F56C6C;
}
</style> 